<style lang="less">
    @import "./home.less";
    @import "../../styles/common.less";
</style>
<style lang="less">
    .vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<template>
    <div class="home-main">
        <Row :gutter="10">
            <Col :span="lg1">
                <Row class-name="home-page-row1" :gutter="10">
                    <Col :md="12" :lg="24" :style="{marginBottom: '10px'}">
                        <Card :dis-hover="true">
                            <Row type="flex" class="user-infor">
                                <Col span="24" align="center" style="padding-left:6px;">
                                    <Row class-name="made-child-con-middle" align="middle">
                                        <div class="clock">
                                            <p class="date">{{ data.date }}</p>
                                            <p class="time">{{ data.time }}</p>
                                        </div>
                                    </Row>
                                </Col>
                            </Row>
                            <div class="line-gray"></div>
                            <Row class="margin-top-8">
                                <Col span="24"><p class="notwrap"><Button @click="addReservation" type="success" long>开始预约</Button></p></Col>
                            </Row>
                        </Card>
                    </Col>
                </Row>
                <!--<Row class-name="home-page-row1" :gutter="10">-->
                  <!--<Col :md="12" :lg="24" :style="{marginBottom: '10px'}">-->
                    <!--<Card>-->
                      <!--<p slot="title" class="card-title">-->
                        <!--<Icon type="calendar"></Icon>-->
                        <!--系统公告-->
                      <!--</p>-->
                    <!--</Card>-->
                  <!--</Col>-->
                <!--</Row>-->
                <!--<Row class-name="home-page-row1" :gutter="10">-->
                    <!--<Col :md="12" :lg="24" :style="{marginBottom: '10px'}">-->
                        <!--<Card :dis-hover="true">-->
                            <!--<p slot="title" class="card-title">-->
                                <!--<Icon type="android-volume-up"></Icon>-->
                                <!--站内广播-->
                            <!--</p>-->
                            <!--<Input v-model="message" :rows="5" :autosize="{minRows: 5}" type="textarea" placeholder="请输入内容..."></Input>-->
                            <!--<Card :bordered="false" :dis-hover="true">-->
                                <!--<p slot="title" class="card-title">-->
                                    <!--<Icon style="color: #19be6b" type="record"></Icon> 在线-->
                                    <!--<Icon style="color: #ed3f14" type="record"></Icon> 离线-->
                                <!--</p>-->
                                <!--<CheckboxGroup v-model="uids">-->
                                    <!--<Row>-->
                                        <!--<Col v-for="(item,index) in users" :key="index" span="6">-->
                                            <!--<Checkbox v-if="item.online === 1" :label="item.id"> <Icon style="color: #19be6b" type="record"></Icon> {{item.name}}</Checkbox>-->
                                            <!--<Checkbox v-if="item.online === 0" :label="item.id"> <Icon style="color: #ed3f14" type="record"></Icon> {{item.name}}</Checkbox>-->
                                        <!--</Col>-->
                                    <!--</Row>-->
                                <!--</CheckboxGroup>-->
                                <!--<p align="right">-->
                                    <!--<Button type="ghost" @click="send">发送消息</Button>-->
                                    <!--<Button type="ghost" @click="sendAll">全部发送</Button>-->
                                <!--</p>-->
                            <!--</Card>-->
                        <!--</Card>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row class-name="home-page-row1" :gutter="10">-->
                    <!--<Col :md="12" :lg="24" :style="{marginBottom: '10px'}">-->
                      <!--<Card :dis-hover="true">-->
                        <!--<p slot="title" class="card-title">-->
                          <!--<Icon type="android-checkbox-outline"></Icon>-->
                          <!--待办事项-->
                        <!--</p>-->
                        <!--<Table no-data-text="没有需要你处理的事务&nbsp;&nbsp;O(∩_∩)O~" :columns="columns" :data="workList" style="width: 100%;"></Table>-->
                      <!--</Card>-->
                    <!--</Col>-->
                <!--</Row>-->
            </Col>
            <Col :span="lg2">
                <Card :dis-hover="true">
                    <p slot="title" class="card-title">
                        <Icon type="calendar"></Icon>
                        任务中心
                    </p>
                    <Tabs type="card" :value="selectTabPane" @on-click="clickTabs">
                        <TabPane label="系统公告" name="0">
                            <div style="width: 100%; height: 100%">
                                <!--<div class="demo-spin-article">-->
                                    <!--<Row>-->
                                        <!--<Col span="20" offset="2">-->
                                            <!--<p align="left" style="margin: 60px 0px 40px 0px;">-->
                                                <!--<label style="font-size: 24px;font-weight: bold"><Icon type="star"></Icon>{{announce.title}}<Icon type="star"></Icon></label>-->
                                            <!--</p>-->
                                        <!--</Col>-->
                                    <!--</Row>-->
                                    <!--<Row>-->
                                        <!--<Col span="20" offset="2">-->
                                            <!--<p align="left" v-for="(content,index) in contents" :key="index">-->
                                                <!--<label>{{content}}</label>-->
                                            <!--</p>-->
                                        <!--</Col>-->
                                    <!--</Row>-->
                                <!--</div>-->
                                <!--<Spin size="large" fix v-if="spinShow"></Spin>-->
                                <Card :bordered="false" :dis-hover="true">
                                    <Tag color="blue" type="dot" slot="title">
                                        {{announce.title}}
                                    </Tag>
                                    <p v-for="(content,index) in contents" :key="index">
                                        <Tag style="width: 100%;font-size: 16px" type="dot" color="blue">
                                            {{content}}
                                        </Tag>
                                    </p>
                                </Card>
                            </div>
                        </TabPane>
                        <TabPane :label="label1" name="1">
                            <reception ref="list1" v-on="{getData1:getData1}"></reception>
                        </TabPane>
                        <TabPane v-if="this.$store.state.app.loginUser.job !== 1 || this.$store.state.app.loginUser.isExpert === 1" :label="label2" name="2">
                            <visit ref="list2" v-on="{getData2:getData2}"></visit>
                        </TabPane>
                        <TabPane :label="label3" name="3">
                            <complete ref="list3" v-on="{getData3:getData3}"></complete>
                        </TabPane>
                        <TabPane :label="label4" name="4">
                            <undone ref="list4" v-on="{getData4:getData4}"></undone>
                        </TabPane>
                        <TabPane v-if="this.$store.state.app.loginUser.job === 1 || this.$store.state.app.loginUser.isExpert === 1 || this.$store.state.app.loginUser.isAdmin === 1" label="今日治疗" name="6">
                          <treatment ref="treatment"></treatment>
                        </TabPane>
                        <TabPane v-if="this.$store.state.app.loginUser.job === 4 || this.$store.state.app.loginUser.isAdmin === 1" label="拒绝治疗" name="7">
                            <refuse-treat ref="refuse"></refuse-treat>
                        </TabPane>
                        <TabPane v-if="this.$store.state.app.loginUser.job !== 1 || this.$store.state.app.loginUser.isAdmin === 1" label="生日提醒" name="8">
                            <patient-list ref="patient" :menuId="-1" :checkDate="true"></patient-list>
                        </TabPane>
                        <TabPane v-if="this.$store.state.app.loginUser.job !== 1 || this.$store.state.app.loginUser.isAdmin === 1" label="季节提醒" name="9">
                            <season-list ref="season" :menuId="-1" :checkDate="true"></season-list>
                        </TabPane>
                        <TabPane v-if="this.$store.state.app.loginUser.job !== 1 || this.$store.state.app.loginUser.isAdmin === 1" label="节假日提醒" name="10">
                            <holiday-list ref="holiday" :menuId="-1" :checkDate="true"></holiday-list>
                        </TabPane>
                        <TabPane label="后勤工作" name="11">
                            <Tabs :value="selectTabPane1" type="card" @on-click="clickTabs1">
                                <TabPane name="0" label="预约">
                                    <Row>
                                        <Col span="8">
                                            <Form :model="workOrder" :label-width="100">
                                                <FormItem label="问题描述" prop="workContent">
                                                    <Input v-model="workOrder.workContent" type="textarea" :autosize="{minRows: 4,maxRows: 5}" placeholder="请输入内容..."></Input>
                                                </FormItem>
                                                <FormItem label="指派给：" prop="userId">
                                                    <Select @on-change="changeUser" v-model="workOrder.processUserId" transfer="true" clearable filterable :label-in-value=true>
                                                        <Option v-for="item in users" :value="item.id" :key="item.id">{{ item.username }}</Option>
                                                    </Select>
                                                </FormItem>
                                                <FormItem label="要求完成时间：" prop="requireCompleteDate">
                                                    <Row>
                                                        <Col span="11">
                                                            <DatePicker ref="datePicker" format="yyyy-MM-dd" @on-change="changeDate" transfer="true" type="date" placeholder="请选择日期" style="width: 100%"></DatePicker>
                                                        </Col>
                                                        <Col span="2" align="center">-</Col>
                                                        <Col span="11">
                                                            <TimePicker ref="timePicker" format="HH:mm" @on-change="changeTime" transfer="true" type="time" placeholder="请选择时间" style="width: 100%"></TimePicker>
                                                        </Col>
                                                    </Row>
                                                </FormItem>
                                            </Form>
                                            <p align="right">
                                                <Button type="info" size="large" @click="submitWorkOrder">提交工单</Button>
                                            </p>
                                        </Col>
                                    </Row>
                                </TabPane>
                                <TabPane name="1" label="待我审核">
                                    <work-list1 ref="workList1"></work-list1>
                                </TabPane>
                                <TabPane name="2" label="待我处理">
                                    <work-list2 ref="workList2"></work-list2>
                                </TabPane>
                                <!--<TabPane name="3" label="处理完成">-->

                                <!--</TabPane>-->
                            </Tabs>
                        </TabPane>
                        <TabPane label="作息一览表" name="5">
                            <work-schedule ref="schedule"></work-schedule>
                        </TabPane>
                    </Tabs>
                </Card>
            </Col>
        </Row>
        <Modal v-model="loading" :mask-closable="false" class-name="vertical-center-modal" :styles="{visibility: 'hidden'}">
            <h3 slot="header" style="color:#2D8CF0">正在加载系统,请稍后...</h3>
            <p style="visibility: visible;color: #fff;font-size: 16px">系统加载进度：{{this.$store.state.app.percent}}%</p>
            <Progress style="visibility: visible" :percent="this.$store.state.app.percent"></Progress>
            <div slot="footer">
            </div>
        </Modal>
        <div id="agora_remote"></div>
    </div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script>
</script>
<script>
import ReconnectingWebSocket from 'reconnecting-websocket'
import cityData from './map-data/get-city-value.js';
import homeMap from './components/map.vue';
import dataSourcePie from './components/dataSourcePie.vue';
import visiteVolume from './components/visiteVolume.vue';
import serviceRequests from './components/serviceRequests.vue';
import userFlow from './components/userFlow.vue';
import countUp from './components/countUp.vue';
import inforCard from './components/inforCard.vue';
import mapDataTable from './components/mapDataTable.vue';
import toDoListItem from './components/toDoListItem.vue';
import reception from '@/view/business/reservation/Reception.vue';
import visit from '@/view/business/reservation/Visit.vue';
import complete from '@/view/business/reservation/Complete.vue';
import undone from '@/view/business/reservation/Undone.vue';
import treatment from '@/view/business/reservation/Treatment.vue';
import workList1 from '@/views/own-space/list/WorkList1.vue'
import workList2 from '@/views/own-space/list/WorkList2.vue'
// import music from './music.vue'
import workSchedule from '@/view/business/attendance/WorkSchedule.vue';
import seasonList from '@/view/basic/config/SeasonList.vue';
import holidayList from '@/view/basic/config/HolidayList.vue';
import patientList from '@/view/business/patient/Patient.vue';
import refuseTreat from '@/view/business/reservation/RefuseTreat.vue';
import AgoraRTC from 'agora-rtc-sdk'
export default {
    name: 'home',
    components: {
        patientList,
        homeMap,
        dataSourcePie,
        visiteVolume,
        serviceRequests,
        userFlow,
        countUp,
        inforCard,
        mapDataTable,
        toDoListItem,
        reception,
        visit,
        complete,
        undone,
        treatment,
        // music,
        workSchedule,
        seasonList,
        holidayList,
        refuseTreat,
        workList1,
        workList2
    },
    data () {
        return {
            socketURL: '/user/socket',
            message: '',
            percent: '0',
            loading: false,
            uids: [],
            users: [],
            // mine: {},
            // friend: [],
            length1: '',
            label1: (h) => {
                return h('div', [
                    h('span', '今日接待 '),
                    // h('Badge', {
                    //     props: {
                    //         count: this.length1,
                    //         className: 'demo-badge-wait'
                    //     }
                    // })
                ])
            },
            length2: '',
            label2: (h) => {
                return h('div', [
                    h('span', '电话随访 '),
                    // h('Badge', {
                    //     props: {
                    //         count: this.length2,
                    //         className: 'demo-badge-wait'
                    //     }
                    // })
                ])
            },
            length3: '',
            label3: (h) => {
                return h('div', [
                    h('span', '今日完成 '),
                    // h('Badge', {
                    //     props: {
                    //         count: this.length3,
                    //         className: 'demo-badge-alone'
                    //     }
                    // })
                ])
            },
            length4: '',
            label4: (h) => {
                return h('div', [
                    h('span', '未完成 '),
                    // h('Badge', {
                    //     props: {
                    //         count: this.length4
                    //     }
                    // })
                ])
            },
            lg1: '6',
            lg2: '18',
            spinShow: true,
            announce: {
                title: '',
                content: ''
            },
            contents: [],
            username: this.$store.state.app.loginUser.username,
            week: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
            data: {
                time: '',
                date: ''
            },
            count: {
                createUser: 0,
                visit: 0,
                collection: 0,
                transfer: 0
            },
            cityData: cityData,
            showAddNewTodo: false,
            newToDoItemValue: '',
            selectTabPane: '0',
            selectTabPane1: '0',
            workList: [],
            columns: [
                {
                    title: '发起人',
                    key: 'submitUserName',
                    width: 100
                },{
                    title: '要求完成时间',
                    key: 'requireCompleteTime',
                    render: (h, params) => {
                        return h('span', this.$moment(params.row.requireCompleteTime).format('YYYY年MM月DD日 HH时mm分'))
                    }
                },{
                    title: '详情',
                    width: 80,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'info',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.toCenter()
                                    }
                                }
                            }, '查看')
                        ]);
                    }
                }
            ],
            timeout: 30000,
            timeoutobj: '',
            servertimeoutobj: '',
            requireCompleteDate: '',
            requireCompleteTime: '',
            workOrder: {
                workContent: '',
                processUserId: '',
                processUserName: '',
                requireCompleteTimeStr: ''
            }
        };
    },
    computed: {
        avatorPath () {
            return localStorage.avatorImgPath;
        }
    },
    methods: {
        heartCheck () {
            this.reset().start()
        },
        changeUser (option) {
            this.workOrder.processUserId = option.value
            this.workOrder.processUserName = option.label
        },
        loadWorkUser () {
            let url = '/user/getWorkUser'
            this.$ajax.get(url).then(response => {
                let {code, data, msg} = response.data
                if (code === 0) {
                    this.users = data
                } else {
                    this.$bus.alert('error', msg)
                }
            })
        },
        changeDate (val) {
            this.requireCompleteDate = val
        },
        changeTime (val) {
            this.requireCompleteTime = val
        },
        submitWorkOrder () {
            if (this.requireCompleteDate !== '') {
                this.workOrder.requireCompleteTimeStr = this.requireCompleteDate
            }
            if (this.requireCompleteTime !== '') {
                this.workOrder.requireCompleteTimeStr += ' ' + this.requireCompleteTime + ':00'
            }
            let url = "/user/work/saveOrUpdate"
            this.$ajax.post(url, this.workOrder).then(response => {
                let {code, msg} = response.data
                if (code === 0) {
                    this.$bus.alert('success', '提交成功')
                    // 初始化数据
                    this.$bus.init(this.workOrder)
                } else {
                    this.$bus.alert('error', msg)
                }
            })
        },
        reset () {
            clearTimeout(this.timeoutobj)
            clearTimeout(this.servertimeoutobj)
            return this
        },
        start () {
            this.timeoutobj = setTimeout(() => {
                this.websocket.send("")
                this.servertimeoutobj = setTimeout(() => {
                    this.websocket.close()
                }, this.timeout)
            }, this.timeout)
        },
        getData1 (length) {
            this.length1 = length
        },
        getData2 (length) {
            this.length2 = length
        },
        getData3 (length) {
            this.length3 = length
        },
        getData4 (length) {
            this.length4 = length
        },
        loadAnnounce () {
            let url = '/user/announce/find'
            this.$ajax.get(url).then(r => {
                let {code, data, params, msg} = r.data
                if (code === 0) {
                    setTimeout(() => {
                        this.spinShow = false
                        this.announce = data
                        this.contents = params.content
                    }, 1000)
                } else {
                    this.$bus.alert('error', msg)
                }
            })
        },
        toCenter () {
            this.$router.push({
                name: 'ownspace_index'
            });
        },
        clickTabs (name) {
            this.lg1 = '6'
            this.lg2 = '18'
            if (name === '1') {
                this.lg1 = '0'
                this.lg2 = '24'
                this.$refs.list1.pageModel.pageNumber = 1
                // this.$refs.list1.pageModel.pageSize = 10
                this.$refs.list1.search()
            } else if (name === '2') {
                this.lg1 = '0'
                this.lg2 = '24'
                this.$refs.list2.pageModel.pageNumber = 1
                // this.$refs.list2.pageModel.pageSize = 10
                this.$refs.list2.search()
            } else if (name === '3') {
                this.lg1 = '0'
                this.lg2 = '24'
                this.$refs.list3.pageModel.pageNumber = 1
                // this.$refs.list3.pageModel.pageSize = 10
                this.$refs.list3.selectPane = '1'
                this.$refs.list3.refresh()
            } else if (name === '4') {
                this.lg1 = '0'
                this.lg2 = '24'
                this.$refs.list4.pageModel.pageNumber = 1
                // this.$refs.list4.pageModel.pageSize = 10
                this.$refs.list4.selectPane = '1'
                this.$refs.list4.refresh()
            } else if (name === '5') {
                this.lg1 = '0'
                this.lg2 = '24'
                this.$refs.schedule.refresh()
            } else if (name === '6') {
                this.lg1 = '0'
                this.lg2 = '24'
                this.$refs.treatment.refresh()
            } else if (name === '7') {
                this.lg1 = '0'
                this.lg2 = '24'
                this.$refs.refuse.refresh()
            } else if (name === '8') {
                this.lg1 = '0'
                this.lg2 = '24'
                this.$refs.patient.refresh()
            } else if (name === '9') {
                this.lg1 = '0'
                this.lg2 = '24'
                this.$refs.season.refresh()
            } else if (name === '10') {
                this.lg1 = '0'
                this.lg2 = '24'
                this.$refs.holiday.refresh()
            } else if (name === '11') {
                this.lg1 = '0'
                this.lg2 = '24'
                this.loadWorkUser()
                this.selectTabPane1 = '0'
            }
            this.selectTabPane = name
        },
        clickTabs1 (name) {
            if (name === '0') {
                this.loadWorkUser()
            } else if (name === '1') {
                this.$refs.workList1.refresh()
            } else if (name === '2') {
                this.$refs.workList2.refresh()
            }
            this.selectTabPane1 = name
        },
        updateTime () {
            var cd = new Date();
            this.data.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
            this.data.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth()+1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + this.week[cd.getDay()];
        },
        zeroPadding (num, digit) {
            var zero = '';
            for (var i = 0; i < digit; i++) {
                zero += '0';
            }
            return (zero + num).slice(-digit);
        },
        addReservation () {
            this.$bus.toPath('/reservation/details')
        },
        searchWorkList () {
            let url = '/user/work/findByUser'
            this.$ajax.get(url).then(response => {
                let {code, data, msg} = response.data
                if (code === 0) {
                    this.workList = data
                } else {
                    this.$bus.alert('error', msg)
                }
            })
        },
        refreshList1 () {
            this.$refs.list1.search()
        },
        send () {
            if (this.message === '') {
                this.$bus.alert('warning', '发送内容不能为空')
                return
            }
            if (this.uids.length > 0) {
                let url = this.socketURL + '/send'
                this.$ajax.post(url, {
                    message: this.message,
                    clientIds: this.uids
                }).then(r => {
                    let {code, msg} = r.data
                    if (code === 0) {
                        // this.$bus.alert('success', '发送成功')
                        this.message = ''
                        this.uids = []
                    } else {
                        this.$bus.alert('error', '发送失败')
                    }
                })
            } else {
                this.$bus.alert('warning', '请选择要通知的人')
            }
        },
        sendAll () {
            if (this.message === '') {
                this.$bus.alert('warning', '发送内容不能为空')
                return
            }
            let url = this.socketURL + '/send'
            this.$ajax.post(url, {
                message: this.message,
                clientIds: ''
            }).then(r => {
                let {code, msg} = r.data
                if (code === 0) {
                    // this.$bus.alert('success', '发送成功')
                    this.message = ''
                } else {
                    this.$bus.alert('error', '发送失败')
                }
            })
        },
        init () {
            this.announce = ''
            this.contents = ''
            this.spinShow = true
            // 查询待办事项
            this.searchWorkList()
            // 加载系统公告
            this.loadAnnounce()
        },
        initIM () {
            let url = '/user/socket/init/' + this.$store.state.app.loginUser.id
            this.$ajax.get(url).then(r => {
                let {code, data, msg} = r.data
                if (code === 0) {
                    this.initMine(data.mine, data.friend, data.group)
                } else {
                    this.$bus.alert('error', msg)
                }
            })
        },
        initMine (mine, friend, group) {
            layui.use('layim', (layim) => {
                // 系统消息
                layim.config({
                    brief: true //是否简约模式（如果true则不显示主面板）
                }).chat({
                    name: '系统消息'
                    ,type: 'friend'
                    ,avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543836502369&di=67edfe1aebf5b45d76a595366a3bd5eb&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fbd74bfeff0a53dc0fe97a0f934dac54bf83664973189-47Hnlq_fw236'
                    ,id: -1
                    ,status: "online"
                });
                layim.setChatMin();
                //基础配置
                layim.config({
                    title: this.$store.state.app.loginUser.username,
                    min: true,
                    // initSkin: this.$store.state.app.loginUser.skin,
                    isgroup: true,
                    isAudio: true,
                    isVideo: true,
                    notice: true,
                    copyright: true,
                    skin: [
                    ],
                    init: {
                        mine: mine,
                        friend: friend,
                        group: group
                    } //获取主面板列表信息，下文会做进一步介绍

                    //获取群员接口（返回的数据格式见下文）
                    ,members: {
                        url: this.$store.state.app.WEBROOT + '/user/socket/getMembers',
                        type: 'get' //默认get，一般可不填
                    }

                    //上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
                    ,uploadImage: {
                        url: this.$store.state.app.UPLOADURL + '/file/upload' //接口地址
                        ,type: 'post' //默认post
                    }

                    //上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
                    ,uploadFile: {
                        url: this.$store.state.app.UPLOADURL + '/file/upload' //接口地址
                        ,type: 'post' //默认post
                    }
                    //扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
                    ,tool: [{
                        alias: 'code' //工具别名
                        ,title: '代码' //工具名称
                        ,icon: '&#xe64e;' //工具图标，参考图标文档
                    }]

                    // ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
                    // ,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
                    // ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可
                });
                let url = this.$store.state.app.SOCKETURL + "/websocket?clientId=" + this.$store.state.app.loginUser.id
                var socket = new ReconnectingWebSocket(url);
                // socket.send('Hi Server, I am LayIM!');
                socket.onopen = (res) => {
                    let user = this.$store.state.app.loginUser
                    let msg = "<div style='text-align: left'>欢迎你，<a href='#' style='color: #ff9900'>" + user.username + "</a>" + '<Icon type="ionic"></Icon>'
                    layim.getMessage({
                        system: true //系统消息
                        ,id: -1 //聊天窗口ID
                        ,type: "friend" //聊天窗口类型
                        ,status: "online"
                        ,content: msg
                    });
                    this.$store.state.app.percent = 100
                };
                // 监听发送消息
                socket.onmessage = (res) => {
                    //res为接受到的值，如 {"emit": "messageName", "data": {}}
                    //emit即为发出的事件名，用于区分不同的消息
                    res = JSON.parse(res.data);
                    if(res.emit === 'chatMessage'){
                        layim.getMessage(res.data); //res.data即你发送消息传递的数据（阅读：监听发送的消息）
                    } else if (res.emit === 'refresh') {
                        layim.setFriendStatus(res.id, res.status);
                    } else if (res.emit === 'reload') {
                        setTimeout(() => {
                            this.$Modal.error({
                                title: '操作提示',
                                content: '<p>您已被强制下线</p>',
                                closable: false,
                                onOk: () => {
                                    window.location.reload()
                                }
                            }, 1000)
                        })
                    }
                };
                // 监听连接断开
                socket.onerror = () => {
                    $.jBox.messager("通讯连接中断,将无法收到消息提醒，如果需要重新加入，请尝试重新登录", "系统提示", 0, {
                        width: 350,
                        icon: 'warning',
                        showType: 'slide'
                    })
                }
                // 监听发送消息
                layim.on('sendMessage', (res) => {
                    var to = res.to;
                    if (to.id === -1) {
                        layim.getMessage({
                            system: true //系统消息
                            ,id: -1 //聊天窗口ID
                            ,type: "friend" //聊天窗口类型
                            ,content: '请不要尝试发消息给系统, 因为一辈子也得不到回复~'
                        });
                    } else {
                        socket.send(JSON.stringify({
                            type: 'chatMessage',
                            data: res
                        }));
                    }
                });
                // 监听状态变化
                layim.on('online', (status) => {
                    console.log(status); //获得online或者hide
                    this.$bus.modal('warning', '系统提示', '不好意思，该功能尚未实现')
                });
                // 监听签名变化
                layim.on('sign', (value) => {

                });
                // 监听皮肤变化
                layim.on('setSkin', function(filename, src){

                });
                // 监听聊天窗口的切换
                layim.on('chatChange', (res) => {
                    var type = res.data.type;
                    if(type === 'friend'){
                        let url = "/user/socket/getOnline/" + res.data.id
                        this.$ajax1.get(url).then(r => {
                            let {code, data, msg} = r.data
                            if (code === 0) {
                                console.log(data)
                                if (data === 'online') {
                                    layim.setChatStatus('<span style="color:#19be6b;">在线</span>');
                                } else {
                                    layim.setChatStatus('<span style="color:#80848f">离线</span>');
                                }
                            }
                        })
                    } else if(type === 'group'){

                    }
                });
                // 查看群成员
                layim.on('members', (data) => {
                });
            });
        }
    },
    beforeCreate () {
        setTimeout(() => {
            this.$store.state.app.percent = 0
            this.loading = true
            let timer = setInterval(() => {
                let percent = this.$store.state.app.percent
                if (percent < 100){
                    if ((this.$store.state.app.percent + 2) < 100) {
                        this.$store.state.app.percent = this.$store.state.app.percent + 2
                    }
                }
                if (percent >= 100) {
                    clearInterval(timer);
                    setTimeout(() => {
                        this.loading = false
                        this.$bus.alert('success', '加载完成')
                        // setTimeout(() => {
                        //     let url = '/user/reservation/preview'
                        //     this.$ajax1.get(url).then(r => {
                        //     })
                        // }, 1000)
                    },50)
                }
            },50)
        }, 500)
    },
    created () {
        // 加载通讯组件
        this.initIM()
        // 时钟定时器
        setInterval(this.updateTime, 1000)
        // 超时机制
        setTimeout(() => {
            if (this.loading) {
                this.loading = false
                // setTimeout(() => {
                //     this.$Modal.warning({
                //         title: '系统提醒',
                //         content: '网络欠佳,系统加载超时,请重新登录',
                //         onOk: () => {
                //             window.location.reload()
                //         }
                //     });
                // },100)
            }
        },10000)
    },
    mounted () {
        // 初始化
        this.init()
    },
    watch: {
        '$route' (to) {
            if (to.path === '/home') {
                this.selectTabPane = '1'
                //刷新今日接待
                this.$refs.list1.search()
            }
        }
    }
};
</script>
<style>

p {
  margin: 0;
  padding: 0;
}

.clock {
  font-family: 'Share Tech Mono', monospace;
  color: #ffffff;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #5cadff;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
.date {
  letter-spacing: 0.1em;
  font-size: 24px;
}
.time {
  letter-spacing: 0.05em;
  font-size: 80px;
}
.demo-badge-alone{
    background: #5cb85c !important;
}
.demo-badge-wait{
    background: #ff9900 !important;
}
</style>
